import React, { useState } from 'react';
import { Form, Input, Button, message, Card, Divider, Typography } from 'antd';
import { materialOrderService } from '../../services/materialOrderService';
import { useNavigate } from 'react-router-dom';

const { Title, Text } = Typography;

const MaterialOrderForm = ({ material }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const onFinish = async (values) => {
    try {
      setLoading(true);
      const customerInfo = {
        name: values.name,
        email: values.email,
        phone: values.phone,
        address: values.address,
        company: values.company,
        taxId: values.taxId,
        notes: values.notes
      };

      // 创建材料订单
      const orderResult = await materialOrderService.createOrder(material.id, customerInfo);
      
      message.success('订单创建成功');
      
      // 导航到支付页面
      navigate(`/material/payment/${orderResult.orderNumber}`);
    } catch (error) {
      console.error('创建订单失败:', error);
      message.error('创建订单失败: ' + (error.message || '未知错误'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="material-order-form">
      <Title level={3}>购买材料</Title>
      <Divider />
      
      <div className="material-info">
        <Title level={4}>{material.title}</Title>
        <Text>价格: ¥{material.price}</Text>
        <Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
          {material.description}
        </Text>
      </div>
      
      <Divider />
      
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{}}
      >
        <Title level={4}>客户信息</Title>
        
        <Form.Item
          name="name"
          label="姓名"
          rules={[{ required: true, message: '请输入姓名' }]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        
        <Form.Item
          name="email"
          label="电子邮箱"
          rules={[
            { required: true, message: '请输入电子邮箱' },
            { type: 'email', message: '请输入有效的电子邮箱' }
          ]}
        >
          <Input placeholder="请输入电子邮箱" />
        </Form.Item>
        
        <Form.Item
          name="phone"
          label="电话号码"
          rules={[{ required: true, message: '请输入电话号码' }]}
        >
          <Input placeholder="请输入电话号码" />
        </Form.Item>
        
        <Form.Item
          name="address"
          label="地址"
        >
          <Input.TextArea placeholder="请输入地址" rows={2} />
        </Form.Item>
        
        <Form.Item
          name="company"
          label="公司名称"
        >
          <Input placeholder="请输入公司名称（如适用）" />
        </Form.Item>
        
        <Form.Item
          name="taxId"
          label="税号"
        >
          <Input placeholder="请输入税号（如需发票）" />
        </Form.Item>
        
        <Form.Item
          name="notes"
          label="备注"
        >
          <Input.TextArea placeholder="其他需要说明的事项" rows={3} />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading} block>
            提交订单
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default MaterialOrderForm;